<template>
	<view class="animated fadeIn faster page-bg">
		<view class="d-flex py-2 d-flex-column d-flex-middle">
			<image style="width:300rpx; height: 300rpx;" class="rounded20" :src="gameData.game_icon"></image>
			<view class="my-1 font-bold">{{gameData.game_text}}</view>
		</view>
		<view class="mx-2">
			<view class="p-item d-flex d-flex-middle d-flex-between" @click="openModal">
				<view class="font26 text-right" style="width: 160rpx;">
					<text class="color666">选择游戏：</text>
				</view>
				<view class="d-flex-item py-1-5 px-1 text-right pr-2">{{gameData.game_text}} </view>
			</view>

			<view class="p-item d-flex ">
				<view class="font26 text-right" style="width: 160rpx;">
					<text class="color666">订单类型：</text>
				</view>
				<view class="d-flex-item py-1-5 px-1 text-right pr-2">{{gameData.type_text}} </view>
			</view>

			<view class="p-item d-flex d-flex-between">
				<view class="font26 " style="width: 210rpx;">
					<text class="colorprice">*</text><text class="color666">选择登录方式：</text>
				</view>
				<view class="d-flex d-flex-middle py-1-5 pr-3 d-flex-wrap d-flex-end d-flex-item">
					<view class="d-flex d-flex-middle d-flex-bottom pr-2" v-for="(item,index) in loginMethod1"
						:key="index+'c'" @click="formData.game_login_type = item.type">
						<text class="iconfont font30 mr "
							:class="formData.game_login_type == item.type?'icon-xuanzhong1 main-color':'icon-gouxuan1 color666'"></text><text>{{item.name}}</text>
					</view>
				</view>
			</view>


			<view class="p-item d-flex d-flex-middle d-flex-between">
				<view class="font26 text-right" style="width: 160rpx;">
					<text class="colorprice">*</text><text class="color666">选择区服：</text>
				</view>
				<view class="d-flex d-flex-middle py-1-5 pr-2 d-flex-wrap d-flex-end ">
					<view class="d-flex d-flex-middle d-flex-bottom pr-2" v-for="(item,index) in loginMethod"
						:key="index+'c'" @click="formData.game_type = item.type">
						<text class="iconfont font30 mr "
							:class="formData.game_type == item.type?'icon-xuanzhong1 main-color':'icon-gouxuan1 color666'"></text><text>{{item.name}}</text>
					</view>
				</view>
			</view>

			<view class="p-item d-flex d-flex-middle d-flex-between">
				<view class="font26 text-right" style="width: 160rpx;" @click="openModal1">
					<text class="color666">接单打手：</text>
				</view>
				<view class="d-flex-item py-1-5 px-1 text-right d-flex d-flex-end d-flex-middle">
					<text :class="{'colorhold': !gameData.goon_name}" @click="openModal1">
						{{gameData.goon_name ? gameData.goon_name : '选择打手（不选默认分配)'}}
					</text>
					<text v-if="gameData.goon_name" class="iconfont icon-jiufuqianbaoicon08 main-color ml-1 font32"
						@click.stop="clearSelectedThug"></text>
				</view>
				<text class="iconfont icon-youjiantou color999 mr-1" @click="openModal1"></text>
			</view>


			<view class="p-item d-flex  d-flex-between">
				<view class="font26 text-right" style="width: 170rpx;">
					<text class="color666">下单备注：</text>
				</view>
				<textarea class="note-textarea" placeholder="请输入备注内容..." v-model="formData.remark" @input="handleInput"
					:maxlength="200" :style="{ height: textareaHeight + 'px' }"></textarea>
			</view>

			<view class="p-item d-flex d-flex-column d-flex-between font28 p-2 ">
				<text class="font26 ">下单详情：</text>
				<text >{{gameData.detail}}</text>
			</view>

			<view class="p-item d-flex d-flex-column d-flex-between font28 p-2 ">
				<text class="color999">下单说明：</text>
				<text class="color999  fixedMb">{{gameData.introduce}}</text>
			</view>

		</view>
		<view class="bg-fff d-flex d-flex-between font24 py-3 px-2  d-flex-middle pb-5 fixedBtn">
			<view class="font32 d-flex d-flex-middle">
				<text>合计：</text>
				<input class="price-input" type="digit" v-model="price" @blur="onPriceBlur" />
				<text class="color999">元</text>
			</view>
			<view class="bgcolor598dfc px-3 py-1 rounded20 colorfff font28" @click="openPay">下单</view>
		</view>



		<!-- 选择打手 -->
		<uni-popup v-if="thugList.length>0" :safe-area="false" ref="drawerVisible1" type="bottom" style="position: relative;z-index: 999991;">
			<view class="bg-fff py-4 pb-5 px-2">
				<view class="d-flex d-flex-between">
					<text></text>
					<text class="font32 ml-2">选择打手</text>
					<text @click="$refs.drawerVisible1.close()">取消</text>
				</view>
				<view class="py-1 category d-flex my-4  d-flex-middle d-flex-wrap ">
					<view class="d-flex d-flex-item d-flex-middle mb-2">
						<view class="searchBox ">
							<text class="iconfont icon-icon_sousuo"></text>
							<input class="pl-5 rounded30  font26  bg-eee" v-model="search" placeholder="搜索姓名"
								placeholder-class="colorhold" />
						</view>
						<view class="px-2 color598dfc" style="width: 80rpx;" @click="onSearch">
							搜索
						</view>
					</view>
					<view v-for="(item,inde) in thugList" :key="inde+'c'" @click="onThug(item,inde)"
						class="p-1 rounded20 mb-2 d-flex d-flex-middle m-content d-flex-between"
						:class="thugIndex == inde?'bg-f8':'bg-fff'">
						<image :src="item.avatar" mode="widthFix" class="img mr-2"></image>
						<view class="d-flex d-flex-item  d-flex-between d-flex-middle">
							<view>
								<view class="font-bold font30">{{item.name}}</view>
								<view class="d-flex d-flex-middle d-flex-between py-2">
									<text class="color999 font24">ID:<text>{{item.id}}</text></text>
									<!-- <text class="color999 font24 ">区服：<text></text></text> -->
								</view>
								<view class="d-flex d-flex-middle d-flex-between">
									<text class="mr-2 font24">5.0分</text>
									<text class="color999 font24 ">1笔订单服务中</text>
								</view>
							</view>
							<view>
								<view class=" px-3 py-1 rounded30 colorfff font26"
									:class="item.online_status == 1?'color598dfc':'color999'"
									@click="goUrl('/subPages/homePage/homePage')">
									{{item.online_status == 1?'在线':'已下线'}}
								</view>
							</view>
						</view>
					</view>

				</view>
				<view class="pb-5 m-2" @click="closeModal1">
					<view class="money-sure-btn-bg bgcolor598dfc colorfff d-flex-item font30 p-2 text-center rounded30">
						确认选择
					</view>
					<view class="mt-1 font24 color999 text-center">不选择打手将自动分配</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="payPopup" :safe-area="false"  @touchmove.stop.prevent="moveHandle" type="bottom"
			style="position: relative;z-index: 999991;">
			<view class="wrap">
				<view class="py-3 d-flex d-flex-between d-flex-middle mb-3">
					<view style="width: 150rpx;"></view>
					<text class="font30 color000">立即支付</text>
					<view class="d-flex d-flex-middle d-flex-end pr-3" style="width: 120rpx;"><text
							class="iconfont icon-cuo font30 color999" @click="cancelPay"></text></view>
				</view>
				<view class="pb-4">
					<!-- #ifndef MP-WEIXIN -->
					<view class="d-flex d-flex-between d-flex-middle px-3 mb-4" @click="changePay(1)">
						<view class="d-flex d-flex-middle">
							<image class="rounded"
								src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/appUpload/20241228140259-f541dd69-c75e-43ad-a9e9-7aa92250dc3c.png"
								style="width: 50rpx;height: 50rpx;"></image>
							<text class="ml-1">微信支付</text>
						</view>
						<text class="iconfont font36"
							:class="payType == 1?'main-color icon-xuanzhong1':'colorhold icon-gouxuan1'"></text>
					</view>
					<view class="d-flex d-flex-between d-flex-middle px-3 mb-4" @click="changePay(2)">
						<view class="d-flex d-flex-middle">
							<image class="rounded"
								src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/appUpload/20241228135921-cfaf5d4f-f4f2-4978-988d-5a1c9b0e7b96.png"
								style="width: 50rpx;height: 50rpx;"></image>
							<text class="ml-1">支付宝支付</text>
						</view>
						<text class="iconfont font36"
							:class="payType == 2?'main-color icon-xuanzhong1':'colorhold icon-gouxuan1'"></text>
					</view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="d-flex d-flex-between d-flex-middle px-3 mb-4" @click="changePay(1)">
						<view class="d-flex d-flex-middle">
							<image class="rounded"
								src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/appUpload/20241228140259-f541dd69-c75e-43ad-a9e9-7aa92250dc3c.png"
								style="width: 50rpx;height: 50rpx;"></image>
							<text class="ml-1">微信支付</text>
						</view>
						<text class="iconfont font36"
							:class="payType == 1?'main-color icon-xuanzhong1':'colorhold icon-gouxuan1'"></text>
					</view>
					<!-- #endif -->
					<view class="d-flex d-flex-between d-flex-middle px-3 mb-5" @click="changePay(2)">
						<view class="d-flex d-flex-middle">
							<image class="rounded"
								src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/pay_wap.png"
								style="width: 50rpx;height: 50rpx;"></image>
							<text class="ml-1 mr-1">余额支付</text>
							<text class="font22 colorhold">￥{{balance}}</text>
						</view>
						<text class="iconfont font36"
							:class="payType == 2?'main-color icon-xuanzhong1':'colorhold icon-gouxuan1'"></text>
					</view>
					<view class="px-5">
						<view style="height: 70rpx;border-radius: 50rpx;"
							class="bg-main d-flex d-flex-center d-flex-middle" @click="confirmPay">
							<text class="font30 colorfff">确认支付</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	import {
		payApi
	} from '@/http/payApi';
	import pay from '@/mixins/pay.js'
	import {
		homeApi
	} from '@/http/homeApi.js';
	export default {
		mixins: [pay],
		data() {
			return {
				formData: {
					type_id: '',
					resource_id: "",
					game_type: '',
					game_login_type: '',
					game_server: '',
					goon_id: '',
					remark: ''
				},
				gameData: {},
				search: '',
				price: 0,
				listType: [],
				loginMethod: [{
					type: 1,
					name: '端游'
				}, {
					type: 2,
					name: '手游'
				}],
				loginMethod1: [{
					type: 1,
					name: '微信'
				}, {
					type: 2,
					name: 'QQ'
				}, {
					type: 3,
					name: '其他'
				}],
				noteContent: '',
				textareaHeight: 80,
				wordCount: 0,
				categoryList: [],
				categoryIndex: -1,
				categoriesData: {},
				thugList: [],
				thugIndex: -1,
				thugData: {},
				payType: 1,
			}
		},
		computed: {
			...mapState({
				balance: state => state.balance,
				user_id: state => state.id,
				loginState: state => state.loginState,
			})
		},
		onLoad(data) {
			let option = JSON.parse(decodeURIComponent(data.data))
			this.formData.resource_id = option.id
			this.formData.type_id = option.type_id
			this.price = option.price
			this.gameData = option
			this.categories();
			this.hands()
			this.carryType()
		},
		methods: {
			// 清除已选择的打手
			clearSelectedThug(e) {
				// 清除已选择的打手数据
				this.gameData.goon_name = '';
				this.formData.goon_id = '';
				this.thugData = {};
				this.thugIndex = -1;

				// 显示提示信息
				uni.showToast({
					title: '已取消选择打手',
					icon: 'none'
				});
			},
			async categories() {
				let res = await homeApi.getMyGame()
				this.categoryList = res
			},
			async hands() {
				let params = {
					name: this.search,
					id:this.gameData.game_id
				}
				let res = await homeApi.getHands(params)
				this.thugList = res.data
			},
			async carryType() {
				let res = await homeApi.getCarryType()
				this.listType = res
			},
			changePay(number) {
				this.payType = number
			},
			openPay() {
				if (this.verify()) {
					this.$refs.payPopup.open()
				}
			},
			onPriceBlur(e) {
				const value = e.detail.value
				if (value === '' || isNaN(value)) {
					// 如果输入为空或非数字，恢复为原始价格
					this.price = this.originalPrice
				} else {
					// 确保输入的值是数字并保留两位小数
					this.price = parseFloat(parseFloat(value).toFixed(2))
				}
			},
			async confirmPay() {
				// 验证价格
				if (this.price <= 0) {
					uni.showToast({
						title: '请输入正确的价格',
						icon: 'none'
					})
					return
				}
				this.formData.price = parseInt(this.price)

				let isGoon = false
				if (!this.gameData.goon_name) isGoon = true

				let that = this
				try {
					uni.showLoading({
						title: '订单创建中...'
					})
					const order = await payApi.payCarry(that.formData)
					uni.hideLoading()
					if (order) {
						that.clientTransferPay(order, isGoon)
					}
				} catch (error) {
					console.log('error', error)
				}
			},
			moveHandle() {
				return false
			},
			method(e) {
				if (this.formData.loginMethod.indexOf(e.id) != -1) {
					let index = this.formData.loginMethod.indexOf(e.id)
					this.formData.loginMethod.splice(index, 1)
				} else {
					this.formData.loginMethod.push(e.id)
				}
			},
			handleInput(e) {
				this.wordCount = e.detail.value.length
				// 根据内容自动调整高度
				if (this.wordCount > 100) {
					this.textareaHeight = 160
				}
			},

			openModal1(e) {
        if (this.thugList.length>0) {
          this.$refs.drawerVisible1.open()
        }else  {
          uni.showToast({
            title: '暂无关联打手',
            icon: 'none'
          })
        }
			},
			closeModal1() {
				this.$refs.drawerVisible1.close()
				if (this.thugData) {
					this.gameData.goon_name = this.thugData.name;
					this.formData.goon_id = this.thugData.id;
				}
			},
			onCategory(data, index) {
				this.categoriesData = data
				this.categoryIndex = index
			},
			onThug(data, index) {
				this.thugData = data
				this.thugIndex = index
			},
			onSearch() {
				this.thugList = []
				this.hands()
			},
			// 取消支付
			cancelPay() {
				// 关闭支付弹窗
				this.$refs.payPopup.close();

				// 显示提示信息
				uni.showToast({
					title: '已取消支付',
					icon: 'none'
				});

			},

			verify(e) {
				let that = this

				if (that.formData.game_login_type == '') {
					uni.showToast({
						title: '请选择登录方式',
						icon: 'none'
					})
					return false
				}
				if (that.formData.game_type == '') {
					uni.showToast({
						title: '请选择区服',
						icon: 'none'
					})
					return false
				}

				return true
			},
			goUrl(urlPages) {
				if (!this.loginState) {
					uni.showToast({
						title: '未登录，请先登录！',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 1500)
				} else {
					uni.navigateTo({
						url: urlPages
					})
				}
			},
		}
	}
</script>


<style scoped>
	.cateActive {
		background: #aec8ff;
		border: 10rpx solid #aec8ff;
	}

	.cate {
		width: 84rpx;
		height: 84rpx;
		overflow: hidden;
		border: 8rpx solid transparent;
	}

	.cateImg {
		width: 84rpx;
		height: 84rpx;
	}

	.color598dfc {
		color: #598dfc;
	}

	.bgcolor598dfc {
		background-color: #598dfc;
	}

	.p-item {
		background-color: rgba(255, 255, 255, .5);
		padding-top: 25rpx;
		padding-bottom: 25rpx;
		margin-bottom: 4rpx;
	}



	.searchBox {
		position: relative;
		width: 100%;
	}

	.searchBox input {
		height: 56rpx;
		line-height: 56rpx;
	}

	.searchBox text {
		position: absolute;
		left: 13rpx;
		top: 12rpx;
	}

	.m-content {
		width: 100%;
	}

	.m-content .img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 160rpx;
	}

	.colorprice {
		color: #f56c22;
		margin-right: 6rpx;
	}

	.fixedBtn {
		position: fixed;
		bottom: 0;
		width: calc(100% - 40rpx);
	}

	.fixedMb {
		margin-bottom: 150rpx;
	}

	.price-input {
		border-bottom: 2rpx solid #ff0000;
		color: #ff0000;
		outline: none;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		background-color: #ffffff;
		width: 180rpx;
		height: 60rpx;
		display: inline-block;
		margin: 0 10rpx;
		padding: 0 10rpx;
	}
</style>